import React, { useEffect, useState } from 'react';
import { Row, Col, Spin, Empty } from 'antd';
import { eventTrack } from '@/utils/track';
import { history } from 'umi';
import LinkTo from '@/components/LinkTo';
import { getPersonQuit } from '@/services/onboardAndLeave/quitManagement';
import { quitAdjustPostState } from '@/utils/adjustPostState';
import styles from './EntryList.less';

/**
 * 离职
 */

const QuitManagement = () => {
    const [spinning, setSpinning] = useState(false);
    const [sourceData, setSourceData] = useState([]);

    useEffect(() => {
        const init = async () => {
            setSpinning(true);
            const result = await getPersonQuit({
                pageNo: 1,
                pageSize: 4
            });
            setSpinning(false);
            if (result && result.code === 10000) {
                setSourceData(result.data.rows);
            }
        };
        init();
    }, []);
    return (
        <Spin spinning={spinning}>
            {sourceData.length === 0 ? (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            ) : (
                sourceData.map(item => {
                    const linkContent = () => {
                        const path = '/personal/portal/flow/mine/applyLeave';
                        const innerParams = {
                            leaveOfficeId: item.id
                        };
                        const title = `${item.employeeName}-${quitAdjustPostState(
                            item.states,
                            item.assigneeEmployeeNames
                        )}`;
                        return (
                            <LinkTo
                                to={path}
                                query={innerParams}
                                title={item.employeeName}
                                className={styles.title}
                                // 埋点
                                onClick={(e, url) => {
                                    eventTrack({
                                        eventName: 'portal_my_onboard_and_leave_office_record_click',
                                        pageName: 'personal_portal',
                                        eventProps: {
                                            click_context: title
                                        }
                                    });
                                    history.push(url);
                                }}
                            >
                                {title}
                            </LinkTo>
                        );
                    };

                    return (
                        <div className={styles.tabPaneItem} style={{ padding: 0 }} key={item.id}>
                            <Row gutter={4}>
                                <Col span={16}>{linkContent()}</Col>
                                <Col span={8} className={styles.lastTab}>
                                    {item.actualLeaveDate}
                                </Col>
                            </Row>
                        </div>
                    );
                })
            )}
        </Spin>
    );
};
export default QuitManagement;
